import { ref } from 'vue'
import {
    ElMessage,
    ElMessageBox,
    UploadProps,
    UploadUserFile,
} from 'element-plus'

function useUpload() {
    const fileList = ref<UploadUserFile[]>([
        // {
        //     name: 'element-plus-logo.svg',
        //     url: 'https://element-plus.org/images/element-plus-logo.svg',
        // },
        // {
        //     name: 'element-plus-logo2.svg',
        //     url: 'https://element-plus.org/images/element-plus-logo.svg',
        // },
    ])

    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
        console.log(file, uploadFiles)
    }

    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
        console.log(uploadFile)
    }

    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
        ElMessage.warning(
            `The limit is 3, you selected ${files.length
            } files this time, add up to ${files.length + uploadFiles.length
            } totally`,
        )
    }

    const beforeRemove: UploadProps['beforeRemove'] = (
        uploadFile,
        uploadFiles,
    ) => {
        return ElMessageBox.confirm(
            `Cancel the transfer of ${uploadFile.name} ?`,
        ).then(
            () => true,
            () => false,
        )
    }

    function clearFileList() {
        fileList.value = []
    }

    return {
        fileList,
        handleRemove,
        handlePreview,
        handleExceed,
        beforeRemove,
        clearFileList,
    }
}

export default useUpload
